<template>
    <basic-container>
      <el-row class="rows" >
        <div class="block">
          <span style="margin-left: 20px;color:#3478f5">产线：</span>
          <el-select  v-model="lineId" filterable placeholder="请选择实际产线">
            <el-option
              @click.native="chooseLine(item)"
              v-for="item in realityLineList"
              :label="item.realityLineName"
              :value="item.id"
              :key="item.id">
              <span style="float: left">产线【{{ item.realityLineName }}】</span>
              <span style="float: right; color: #5e80a6; font-size: 13px">品号【{{ item.articleNumber }}】</span>
              <span style="float: left; color: #5e80a6; font-size: 13px; margin: 0  5px">组织【{{ item.organizationName }}】</span>
            </el-option>
          </el-select>
          <span style="margin-left: 20px;color:#3478f5"  v-if="lineId!=null">品号：{{articleNumber}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>组织：{{organizationName}}</span>
        </div>
      </el-row>
      <el-row class="rows" style="border: 1px dashed  #cccccc; min-height: 700px">
        <el-empty v-if="lineId==null" description="暂无数据，请选择产线"></el-empty>
        <el-col v-for="node in nodeList" :span="5" style="margin: 10px 20px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="color: #3b7ecc;font-weight: 700"> {{node.name}}</span>
            </div>
            <div v-for="o in deviceLineList" v-if="o.processId == node.mark" :key="o.id" class="text item">
              <el-descriptions :title="o.deviceName" :column="1">
                <el-descriptions-item label="设备编码">{{o.deviceSn}}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions :column="1" direction="vertical">
                <el-descriptions-item label="显示数据">
                  <el-descriptions :column="1">
                    <el-descriptions-item v-for="s in getColList(o.columnName)" :label="s">
                      <span  v-for=" (value,key,index) in o.deviceData" v-if="key==s">{{value}}</span>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </el-col>

      </el-row>
    </basic-container>
</template>

<script>
    import { getRealityLineList,getDeviceLineData } from '@/api/pfoc/realityproductline'
    export default {
        name: "homeIndex",
        data() {
            return {
                realityLineList:[],//实际产线集合
                lineId:null,//实际产线ID
                nodeList:[],//工序集合
                deviceLineList:[],//产线设备集合
                deviceLineData:[],//产线设备数仓数据集合
                sleep:5000, //时间 5s
                timerFlg:false,//定时器执行标志
                articleNumber:null,//品号
                organizationName:null,//组织名称
            };
        },
        created() {
            //获取实际产线数据集合
            this.getRealityLineListData();
        },
        computed: {
        },
        mounted() {

        },
        methods: {
            // 列表查询
            getList() {
                if(!this.validatenull(this.lineId)) {
                    //通过选择实际产线获取产线设备数据
                    getDeviceLineData(this.lineId).then(response => {
                        this.deviceLineList = response.data.data;
                        for (var i=0;i< this.deviceLineList.length;i++){
                            //临时添加循环字段必须用set方法进行响应式添加变量（原因是不用set进行添加则不是响应式变量，数据改变时页面数据不会重新渲染）
                            this.$set(this.deviceLineList[i],"deviceData",{});
                            if(!this.validatenull(this.deviceLineList[i].list)) {
                                this.timerFlg = true;//开启定时
                                this.runEachArray(this.sleep, this.deviceLineList[i].list, null,i)
                                /*this.deviceLineList[i].list.forEach(function (item, index) {
                                    t.deviceLineList[i].deviceData = item;
                                });*/
                            }
                        }
                    })
                }else{
                    this.$message.warning("请选择产线。")
                }
            },
            //获取实际产线集合
            getRealityLineListData(){
                getRealityLineList().then(response => {
                    this.realityLineList=response.data.data;
                })
            },
            //产线选择
            chooseLine(row){
                this.lineId = row.id;//产线ID
                this.articleNumber=row.articleNumber;//品号
                this.organizationName = row.organizationName;//组织名称
                this.nodeList = JSON.parse(row.processNodes)//工序集合
                this.timerFlg = false;//关闭定时
                this.getList();
            },
            //返回列字段数组
            getColList(item){
              if(!this.validatenull(item)){
                  return item.split(",");
              }else{
                  return [];
              }
            },
            //定时执行
            runEachArray(sleep, arr, index,number) {
                  if (index == null) {
                      index = 0
                  }
                  //重置数据
                  this.deviceLineList[number].deviceData =  arr[index];
                  console.log(this.deviceLineList)
                  index++;
                if(this.timerFlg) {//定时任务执行标志
                    if (index <= arr.length) {
                        let timer = setTimeout(() => {
                            this.runEachArray(sleep, arr, index, number);
                            clearTimeout(timer);//清除定时器
                        }, sleep)
                    } else {
                        this.runEachArray(sleep, arr, null, number)
                    }
                }
             }
        }
    };
</script>

<style scoped>
 /deep/ .el-card__header {
    padding: 10px!important;
    border-bottom: 1px solid #cccccc!important;
    -webkit-box-sizing: border-box!important;
    box-sizing: border-box!important;
    height: 44px!important;
    margin-left: 10px!important;
  }

 /deep/ .text {
    font-size: 12px;
  }

 /deep/ .item {
    margin-bottom: 18px;
  }

 /deep/ .clearfix:before,
 /deep/ .clearfix:after {
    display: table;
    content: "";
  }
 /deep/ .clearfix:after {
    clear: both
  }

 /deep/ .box-card {
    min-width: 200px!important;
    background-color: #fdfdfd!important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0,0.1)!important;;
  }
/deep/ .rows{
  margin-top: 10px;
}
/deep/ .el-descriptions__title{
  font-size: 14px!important;
}
</style>
